<template>
  <view class="card">
    <view class="lf">
      <view class="line"></view>
      <text class="title">{{title}}</text>
    </view>
    <slot name="slotRender"></slot>
  </view>
</template>

<script>
  export default {
    name: "WebCard",
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20rpx;
  }

  .lf {
    display: flex;
    align-items: center;
    margin-right: 30rpx;
  }

  .line {
    width: 4rpx;
    height: 40rpx;
    background-color: #376eff;
    margin-right: 20rpx;
  }

  .title {
    font-size: 34rpx;
    color: #333;
    font-weight: 700;
  }
</style>